<template>
  <div>
    <div v-for="(item, index) in treedata" :key="index">
      <div
        v-if="item.questions && item.questions.length > 0"
        style="display: flex; clear: left; margin: 20px"
      >
        <div style="min-width: 100px; text-align: center">{{ item.label }}</div>
        <div
          v-for="(question, qindex) in item.questions"
          :key="qindex"
          style="display: flex; float: left"
        >
          <div
            v-if="
              question.records &&
              question.records.length > 0 &&
              judge(question.records)
            "
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="question.label"
              placement="top-start"
              style="margin: 0px 10px"
            >
              <el-button
                type="primary"
                @click="handleClick(naireId, question.domain)"
                >{{ qindex + 1 }}</el-button
              >
            </el-tooltip>
          </div>
          <div v-else>
            {{ setNotCommit() }}
            <el-tooltip
              class="item"
              effect="dark"
              :content="question.label"
              placement="top-start"
              style="margin: 0px 10px"
            >
              <el-button
                type="info"
                @click="handleClick(naireId, question.domain)"
                >{{ qindex + 1 }}</el-button
              >
            </el-tooltip>
          </div>
        </div>
      </div>
      <my-tree
        v-if="item.children && item.children.length > 0"
        :treedata="item.children"
        :naireId="parseFloat(naireId)"
      ></my-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "myTree",
  props: {
    naireId: Number,
    treedata: {
      default: function () {
        return [];
      },
    },
  },

  methods: {
    judge(record) {
      let flag = false;
      if (
        this.$store.state.user.roles.length == 1 &&
        this.$store.state.user.roles.includes("common")
      ) {
        record.forEach((item) => {
          if (item.userId == this.$store.state.user.userId) {
            flag = true;
          }
        });
        return flag;
      } else {
        return true;
      }
    },
    handleClick(naireId, domain) {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace({
        name: "showQuestionnaire",
        query: {
          naireId: naireId,
          companyId: this.$route.query.compId || this.$store.state.user.compId,
          domain: domain,
        },
      });
      console.log("naireId", naireId);
      console.log("domain", domain);
    },
    setNotCommit() {
      console.log("first");
      var that = this;
      that.$parent.$emit("changeCommit", false);
    },
  },
};
</script>
